<template>
  <!-- 快存柜商户管理 -->
  <view class="content">
    <!-- banner -->
    <view class="banner"
      ><image class="img" src="../../static/banner.jpg" mode="aspectFit"></image
    ></view>

    <!-- 助手管理中心 -->
    <view class="box fz26">
      <view class="tit flex flex-y-center">
        <sw-icons
          class="mr20"
          icon="icon-shuju"
          size="30"
          color="#487fff"
        ></sw-icons>
        <text>助手管理中心</text>
      </view>

      <view class="ct2 flex flex-x-around">
        <view
          class="item t-c"
          @click="$jump.navigateTo('/pages/network/index')"
        >
          <sw-icons icon="icon-wangdian" size="46" color="#ffa200"></sw-icons>
          <view class="mt30 gray9">网点管理</view>
        </view>
        <view class="item t-c" @click="$jump.navigateTo('/pages/device/index')">
          <sw-icons icon="icon-shebei" size="46" color="#93989b"></sw-icons>
          <view class="mt30 gray9">设备管理</view>
        </view>
        <view class="item t-c" @click="$jump.navigateTo('/pages/order/index')">
          <sw-icons icon="icon-dingdan" size="46" color="#487fff"></sw-icons>
          <view class="mt30 gray9">订单管理</view>
        </view>
      </view>
    </view>

    <!-- 网点数据 -->
    <view class="box fz26 box-green">
      <view class="tit flex flex-y-center">
        <sw-icons
          class="mr20"
          icon="icon-shujuwd"
          size="30"
          color="#096"
        ></sw-icons>
        <text>网点数据</text>
      </view>

      <view class="ct flex-wrap" v-if="state.dataSource.networkStatistics">
        <view class="item"
          >网点数量：
          {{ state.dataSource.networkStatistics.networkCount || 0 }}</view
        >
        <view class="item"
          >设备数量：
          {{ state.dataSource.networkStatistics.equipmentCount || 0 }}</view
        >
        <view class="item"
          >在线设备：
          {{
            state.dataSource.networkStatistics.onlineEquipmentCount || 0
          }}</view
        >
        <view class="item"
          >离线设备：
          {{
            state.dataSource.networkStatistics.offlineEquipmentCount || 0
          }}</view
        >
      </view>
    </view>

    <template v-if="state.roleCode != 'agent_maintain'">
      <!-- 今日数据 -->
      <view class="box fz26 box-yellow">
        <view class="tit flex flex-y-center">
          <sw-icons
            class="mr20"
            icon="icon-jinri"
            size="30"
            color="#ffa200"
          ></sw-icons>
          <text>今日数据</text>
        </view>

        <view class="ct flex-wrap" v-if="state.dataSource.todayInfo">
          <view class="item"
            >订单数量：
            {{ state.dataSource.todayInfo.onlineOrderCount || 0 }}</view
          >
          <view class="item"
            >订单金额： ￥{{
              state.dataSource.todayInfo.todayOrderAmount || 0
            }}</view
          >
          <view class="item"
            >订单用户数量：
            {{ state.dataSource.todayInfo.orderUserCount || 0 }}</view
          >
          <view class="item"
            >退款金额： ￥{{
              state.dataSource.todayInfo.orderRefundAmount || 0
            }}</view
          >
        </view>
      </view>

      <!-- 本月数据 -->
      <view class="box fz26 box-pink">
        <view class="tit flex flex-y-center">
          <sw-icons
            class="mr20"
            icon="icon-benyue"
            size="30"
            color="#f00"
          ></sw-icons>
          <text>本月数据</text>
        </view>

        <view class="ct flex-wrap" v-if="state.dataSource.monthInfo">
          <view class="item"
            >订单数量：{{
              state.dataSource.monthInfo.onlineOrderCount || 0
            }}</view
          >
          <view class="item"
            >订单金额： ￥{{
              state.dataSource.monthInfo.orderAmount || 0
            }}</view
          >
          <view class="item"
            >订单用户数量：
            {{ state.dataSource.monthInfo.orderUserCount || 0 }}</view
          >
          <view class="item"
            >退款金额： ￥{{
              state.dataSource.monthInfo.orderRefundAmount || 0
            }}</view
          >
        </view>
      </view>

      <!-- 全景数据 -->
      <view class="box fz26 box-blue">
        <view class="tit flex flex-y-center">
          <sw-icons
            class="mr20"
            icon="icon-quanjing"
            size="30"
            color="#487fff"
          ></sw-icons>
          <text>本周数据</text>
        </view>

        <view class="ct flex-wrap" v-if="state.dataSource.overallInfo">
          <view class="item"
            >订单数量：{{
              state.dataSource.overallInfo.onlineOrderCount || 0
            }}</view
          >
          <view class="item"
            >订单金额： ￥{{
              state.dataSource.overallInfo.orderAmount || 0
            }}</view
          >
          <view class="item"
            >订单用户数量：{{
              state.dataSource.overallInfo.orderUserCount || 0
            }}</view
          >
          <view class="item"
            >退款金额： ￥{{
              state.dataSource.overallInfo.orderRefundAmount || 0
            }}</view
          >
        </view>
      </view>
    </template>
  </view>
</template>

<script setup>
import { reactive, getCurrentInstance } from "vue";
import { onShow, onHide, onPullDownRefresh } from "@dcloudio/uni-app";
import { getBusiness } from "@/common/js/getData.js";

const { proxy } = getCurrentInstance();
const state = reactive({
  stopLoad: false,
  roleCode: "",
  dataSource: "",
  errorNum: 0,
  times: 3000, // 3秒
  timer: null, // 刷新定时器
});

const loadData = (data) => {
  getBusiness({}, data)
    .then((res) => {
      state.dataSource = res.result;
      state.errorNum = 0;
    })
    .catch((e) => {
      if (e.status === 500) {
        state.stopLoad = true;
      }
      state.errorNum = state.errorNum + 1;
    })
    .finally((e) => {
      uni.stopPullDownRefresh();
      if (state.errorNum > 5 || state.stopLoad) {
        return;
      }
      state.timer = setTimeout(() => {
        loadData({ hideLoad: true });
      }, state.times);
    });
};

// 页面加载完成
onShow(async () => {
  await proxy.$onLaunched;
  state.stopLoad = false;
  state.roleCode = getApp().globalData.roleCode;
  loadData();
});

onHide(() => {
  clearInterval(state.timer);
});

// 下拉刷新
onPullDownRefresh(() => {
  clearInterval(state.timer);
  loadData();
});
</script>

<style lang="less" scoped>
@import url("@/common/less/common.less");
.banner {
  position: relative;
  margin: 0 auto;
  padding: 25rpx;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 175rpx;
    background: @main-theme-color;
  }
  .img {
    position: relative;
    z-index: 3;
    width: 700rpx;
    height: 233rpx;
  }
}

.box {
  padding: 25rpx 0;
  .tit {
    padding: 0 25rpx 10rpx;
  }
  .ct2 {
    padding: 30rpx 25rpx 20rpx;
  }
  .ct {
    padding: 0 40rpx;
    .item {
      width: 50%;
      margin-top: 30rpx;
    }
  }
}

.box-green {
  background: #e0f0e3;
}
.box-yellow {
  background: #f8f0d9;
}
.box-pink {
  background: #fae7ed;
}
.box-blue {
  background: #eef7fe;
}
</style>
